<template>
	<view class="content">
		<view class="mes-view">
			<text class="header-title">{{datasource.store_info.store_name}}</text>
			<!-- 简介 -->
			<view class="productDescription">
				<view class="productDescription-item">
					<view class="row-center">
						<text class="productDescription-title">年代：</text>
						<text class="productDescription-value">{{datasource.store_info.age}}</text>
					</view>
					<view class="row-center">
						<text class="productDescription-title">规格：</text>
						<text class="productDescription-value">{{datasource.store_info.spec}}</text>
					</view>
					<view class="row-center">
						<text class="productDescription-title">特征点：</text>
						<text class="productDescription-value">{{datasource.store_info.feature_point}}</text>
					</view>
				</view>
				<view class="productDescription-item leftline">
					<view class="row-center">
						<text class="productDescription-title">品类：</text>
						<text class="productDescription-value">{{datasource.store_info.category}}</text>
					</view>
					<view class="row-center">
						<text class="productDescription-title">证书编号：</text>
						<text class="productDescription-value">{{datasource.store_info.certificate_no}}</text>
					</view>
					<view class="row-center">

					</view>
				</view>
			</view>
		</view>
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">图片</text>
			</view>
			<view class="potho-view">
				<image class="potho-img" :src="item" v-for="(item,index) in datasource.store_info.slider_image" @click="lookBigPotho(item,1)" :key="index"></image>
			</view>
		</view>
		<!-- 证书 -->
		<view class="group">
			<view class="group-header">
				<text class="group-header-title">证书</text>
			</view>
			<view class="certificate">
				<view class="row-center">
					<text class="productDescription-title">证书编号：</text>
					<text class="productDescription-value">{{datasource.store_info.certificate_no}}</text>
				</view>
				<view class="certificate-potho-view" v-if="datasource.store_info.certificate_img.length>0">
					<image class="certificate-potho" :src="datasource.store_info.certificate_img"></image>
					<text class="lookZS"  @click="lookBigPotho(datasource.store_info.certificate_img,2)">点击查看</text>
				</view>
			</view>
		</view>
		<!-- 过户记录 -->
		<view class="group" v-if="datasource.log.length>0">
			<view class="group-header">
				<text class="group-header-title">过户记录</text>
				<text style="color: #333;font-size: 24upx;">（仅宝物主人可见）</text>
			</view>
			<timeLine :dataArr="datasource.log"></timeLine>
		</view>
	</view>
	</view>
</template>

<script>
	import timeLine from '@/components/timeline/index.vue'
	import {
		getTreasureDetail
	} from '@/api/peopleHide.js'
	export default{
		components:{
			timeLine
		},
		data() {
			return {
				result:{},
				datasource:[]
			}
		},
		onLoad(options) {
			if(options.result){
				this.result = JSON.parse(options.result)
				this.getTreasureDetail()
			}
		},
		methods:{
			//查看大图
			lookBigPotho(e,type){
				let pothoArr = []
				if(type == 1){
					pothoArr = this.datasource.store_info.slider_image
				}else{
					pothoArr = [e]
				}
			  uni.previewImage({
			  	urls:pothoArr,
			    current:e,
				success() {
					
				}
			  })	
			},
			getTreasureDetail(){
				getTreasureDetail(this.result).then(res=>{
					this.datasource = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f5f6;
	}

	.content {
		width: 100%;
		display: flex;
		padding-bottom: 48upx;
		flex-direction: column;
		.mes-view {
			background-color: #fff;
			width: 100%;
			display: flex;
			flex-direction: column;
			padding-bottom: 20upx;

			.header-title {
				color: #000000;
				font-size: 32upx;
				font-weight: 500;
				margin: 34upx 30upx 20upx;
				line-height: 44upx;
			}

			.productDescription {
				width: 750upx;
				height: 182upx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;

				.productDescription-item {
					position: relative;
					display: flex;
					flex-direction: column;
					flex: 1;
					height: 100%;
					padding-left: 30upx;
					box-sizing: border-box;

					.row-center {
						display: flex;
						align-items: center;
						font-size: 24upx;
						flex: 1;
						width: 100%;

						.productDescription-title {
							color: #333;
						}

						.productDescription-value {
							color: #666;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.lookZS {
							font-weight: 500;
							color: #0A77DE;
						}
					}
				}

				.leftline {
					// border-left: 1px solid #F3F3F3;
					position: relative;
				}

				.leftline:after {
					position: absolute;
					content: '';
					width: 1px;
					background-color: #F3F3F3;
					left: 0;
					top: 18upx;
					bottom: 18upx;
				}
			}
		}

		.group {
			background-color: #fff;
			width: 100%;
			margin-top: 20upx;
			display: flex;
			flex-direction: column;

			.group-header {
				display: flex;
				align-items: center;
				position: relative;
				width: 100%;
				height: 80upx;

				.group-header-title {
					color: #333;
					font-size: 28upx;
					font-weight: 500;
					margin-left: 30upx;
				}
			}

			.group-header:after {
				position: absolute;
				content: '';
				left: 0;
				width: 8upx;
				height: 40upx;
				background-color: #0A77DE;
			}

		}
	}

	.potho-view {
		width: 100%;
		// margin-top: 12upx;
		display: flex;
		flex-wrap: wrap;
		padding: 12upx 29upx;
		box-sizing: border-box;

		.potho-img {
			width: 220upx;
			height: 220upx;
			margin-right: 16upx;
			margin-bottom: 16upx;
			border-radius: 8upx;
			// background-color: green;
		}

		.potho-img:nth-of-type(3n) {
			margin-right: 0;
		}
	}
    .certificate{
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 0 64upx 30upx 30upx;
		box-sizing: border-box;
		align-items: center;
		.certificate-potho-view{
			display: flex;
			flex-direction: column;
			align-items: center;
			.certificate-potho{
				width: 120upx;
				height: 120upx;
				background-color: red;
			}
		}
		.lookZS {
			font-weight: 500;
			color: #0A77DE;
			font-size: 24upx;
			margin-top: 22upx;
		}
	}
	
</style>
